<template>
  <div>
    <!-- 面包屑 -->
    <bread-crumb two="商品管理" three="商品列表"></bread-crumb>

    <!-- 卡片区 -->
    <el-card class="box-card">
      <!-- 查询框 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model="query.query"
            clearable
            @clear="renderGoods"
            @keyup.enter.native="renderGoods"
          >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <!-- 添加按钮 -->
        <el-col :span="7">
          <el-button type="primary" @click="$router.push('/goodsadd')">添加商品</el-button>
        </el-col>
      </el-row>

      <el-table :data="goods" stripe style="width: 99%" border>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）" width="80"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="80"></el-table-column>
        <el-table-column prop="add_time_format" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作" width="150">
          <el-row>
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          </el-row>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.num"
        :page-sizes="[5,10,20,30]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tot"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表单数据
      goods: [],
      query: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      tot: 0
    }
  },
  created () {
    this.renderGoods()
  },
  methods: {
    // 获取商品列表信息
    async renderGoods () {
      const { data: dt } = await this.$http.get('goods', { params: this.query })
      // console.log(dt)
      this.goods = dt.data.goods

      this.goods.forEach(item => {
        item.add_time_format = this.timeFormat(item.add_time)
        item.upd_time_format = this.timeFormat(item.upd_time)
      })
      this.tot = dt.data.total
    },

    // 时间格式化
    timeFormat (time) {
      const tm = new Date(time)
      const yyyy = tm.getFullYear()
      const mm = (tm.getMonth() + 1).toString().padStart(2, '0')
      const dd = tm
        .getDate()
        .toString()
        .padStart(2, '0')
      const hh = tm
        .getHours()
        .toString()
        .padStart(2, '0')
      const ii = tm
        .getMinutes()
        .toString()
        .padStart(2, '0')
      const ss = tm
        .getSeconds()
        .toString()
        .padStart(2, '0')
      return `${yyyy}年${mm}月${dd}日 ${hh}:${ii}:${ss}`
    },

    // 每页数量发生变化时回调函数
    handleSizeChange (val) {
      // console.log(val)
      this.query.pagesize = val
      this.renderGoods()
    },

    // 页码发生变化时回调函数
    handleCurrentChange (val) {
      this.query.pagenum = val
      this.renderGoods()
    },

    // 根据关键字检索数据
    search () {
      this.query.pagenum = 1
      this.renderGoods()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
